<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well.
We are unwilling to accept being constrained by our simple format. Also unacceptable is writing raw HTML in our Markdown every time we want to include unsupported content such as a video. To do so is in complete opposition to the intent of using a bare-bones format for our content and utilizing templates to apply styling for display.">
        <link rel="alternate" href="https://www.feiyangkeji.com/feed.xml" type="application/rss+xml" title="阳阳学编程">
        <link rel="icon" href="https://www.feiyangkeji.com/favicon.ico">
        <title>Shortcodes - 阳阳学编程</title>
        <link rel="stylesheet" href="https://www.feiyangkeji.com/css/highlight.js.min.css">
        <link rel="stylesheet" href="https://www.feiyangkeji.com/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://www.feiyangkeji.com/css/bootstrap-theme.css">
        <link rel="stylesheet" href="https://www.feiyangkeji.com/css/font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="https://www.feiyangkeji.com/css/hugo-org.css">
    </head>

<body role="document">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://www.feiyangkeji.com/">阳阳学编程</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    
                    <li ><a href="https://www.feiyangkeji.com/">主页</a></li>
                    <li ><a href="https://www.feiyangkeji.com/doc">固件下载</a></li>
                   
                    
                    <li ><a href="https://www.feiyangkeji.com/post/">文章列表</a></li>
                    
                    <li ><a href="https://www.feiyangkeji.com/theme/">开源项目</a></li>
                    
                    <li ><a href="https://www.feiyangkeji.com/showcase/">免费资源</a></li>
                    
                    <li ><a href="https://www.feiyangkeji.com/donate/">关于</a></li>
                    

                </ul>
            </div>
        </div>
    </nav>



<div class="container-fluid">

<div class="row">
    <div class="col-xs-12 col-sm-3">
        
<aside>
    <div class="well">
        
        <div class="pull-right">智能开关固件 v2.0.1(开发中...)</div>
        <ul class="nav nav-list">
            
            
            
            <li>
                <label class="tree-toggle nav-header">快速开始</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/overview/quickstart/">Quickstart</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">内容(Content)</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/content/archetypes/">Archetypes</a>
                    </li>
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/content/example_en/">Example</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">分类(Taxonomies)</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/taxonomies/displaying/">Displaying</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">常见问题</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/troubleshooting/overview/">Troubleshooting Overview</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">关于Hugo</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/meta/license/">License</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">community</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/community/mailing-list/">Mailing List</a>
                    </li>
                    
                    <li>
                        <a href="http://discuss.gohugo.io">讨论社区</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">extras</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/extras/shortcodes/">Shortcodes</a>
                    </li>
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/extras/toc_en/">Table of Contents</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">layout</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/templates/terms_en/">Taxonomy Terms</a>
                    </li>
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/templates/sitemap/">Sitemap</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">themes</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/themes/creation/">Creating a Theme</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
            <li>
                <label class="tree-toggle nav-header">tutorials</label>
                <ul class="nav nav-list">
                    
                    <li>
                        <a href="https://www.feiyangkeji.com/doc/tutorials/automated-deployments/">Automated deployments</a>
                    </li>
                    
                </ul>
            
            </li>
            
            
              
            <li>
                <a href="https://github.com/coderzh/feiyangkeji.com/edit/master/content/doc/extras/shortcodes.md" target="blank">
                <i class='fa fa-edit'></i>修改此文章</a>
            </li>
            
            
        </ul>
    </div>
</aside>


    </div>
    <div class="col-xs-12 col-sm-9 doc-main">
        <main role="main">
            <article>
                <a id="title"></a>
                <h1 class="doc-entry-title">Shortcodes</h1>
                <section>
                    <p>Hugo uses Markdown for its simple content format. However, there are a lot
of things that Markdown doesn’t support well.</p>
<p>We are unwilling to accept being constrained by our simple format. Also
unacceptable is writing raw HTML in our Markdown every time we want to include
unsupported content such as a video. To do so is in complete opposition to the
intent of using a bare-bones format for our content and utilizing templates to
apply styling for display.</p>
<p>To avoid both of these limitations, Hugo created shortcodes.</p>
<p>A shortcode is a simple snippet inside a content file that Hugo will render
using a predefined template. Note that shortcodes will not work in template
files&mdash;if you need a functionality like that in a template, you most likely
want a <a href="https://www.feiyangkeji.com/doc/templates/partials/">partial template</a> instead.</p>
<p>Another benefit is, you can update your shortcode with any related new classes or
techniques, and upon generation, Hugo will easily merge in your changes. You
avoid a possibly complicated search and replace operation.</p>
<h2 id="using-a-shortcode">Using a shortcode</h2>
<p>In your content files, a shortcode can be called by using the <code>{{% name parameters %}}</code> form. Shortcode parameters are space delimited.  Parameters with spaces
can be quoted.</p>
<p>The first word is always the name of the shortcode. Parameters follow the name.
Depending upon how the shortcode is defined, the parameters may be named,
positional or both (although you can&rsquo;t mixed parameter types in a single call).
The format for named parameters models that of HTML with the format
<code>name=&quot;value&quot;</code>.</p>
<p>Some shortcodes use or require closing shortcodes. Like HTML, the opening and closing
shortcodes match (name only), the closing being prepended with a slash.</p>
<p>Example of a paired shortcode:</p>
<pre><code>{{&lt; highlight go &gt;}} A bunch of code here {{&lt; /highlight &gt;}}
</code></pre>
<p>The examples above use two different delimiters, the difference being the <code>%</code> and the <code>&lt;</code> character:</p>
<h3 id="shortcodes-with-markdown">Shortcodes with Markdown</h3>
<p>The <code>%</code> characters indicates that the shortcode&rsquo;s inner content needs further processing by the page&rsquo;s rendering processor (i.e. Markdown), needed to get the <strong>bold</strong> text in the example below:</p>
<pre><code>{{% myshortcode %}}Hello **World!**{{% /myshortcode %}}
</code></pre>
<h3 id="shortcodes-without-markdown">Shortcodes without Markdown</h3>
<p>The <code>&lt;</code> character indicates that the shortcode&rsquo;s inner content doesn&rsquo;t need any further rendering, this will typically be pure HTML:</p>
<pre><code>{{&lt; myshortcode &gt;}}&lt;p&gt;Hello &lt;strong&gt;World!&lt;/strong&gt;&lt;/p&gt;{{&lt; /myshortcode &gt;}}
</code></pre>
<h2 id="built-in-shortcodes">Built-in Shortcodes</h2>
<p>Hugo ships with a set of predefined shortcodes.</p>
<h3 id="highlight">highlight</h3>
<p>This shortcode will convert the source code provided into syntax highlighted
HTML. Read more on <a href="https://www.feiyangkeji.com/doc/extras/highlighting/">highlighting</a>.</p>
<h4 id="usage">Usage</h4>
<p><code>highlight</code> takes exactly one required parameter of <em>language</em> and requires a
closing shortcode.</p>
<h4 id="example">Example</h4>
<pre><code>{{&lt; highlight html &gt;}}
&lt;section id=&quot;main&quot;&gt;
  &lt;div&gt;
   &lt;h1 id=&quot;title&quot;&gt;{{ .Title }}&lt;/h1&gt;
    {{ range .Data.Pages }}
        {{ .Render &quot;summary&quot;}}
    {{ end }}
  &lt;/div&gt;
&lt;/section&gt;
{{&lt; /highlight &gt;}}
</code></pre>
<h4 id="example-output">Example Output</h4>
<pre><code>&lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;section&lt;/span&gt; &lt;span style=&quot;color: #a6e22e&quot;&gt;id=&lt;/span&gt;&lt;span style=&quot;color: #e6db74&quot;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #f92672&quot;&gt;&amp;gt;&lt;/span&gt;
  &lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
   &lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;h1&lt;/span&gt; &lt;span style=&quot;color: #a6e22e&quot;&gt;id=&lt;/span&gt;&lt;span style=&quot;color: #e6db74&quot;&gt;&amp;quot;title&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #f92672&quot;&gt;&amp;gt;&lt;/span&gt;{{ .Title }}&lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
    {{ range .Data.Pages }}
        {{ .Render &amp;quot;summary&amp;quot;}}
    {{ end }}
  &lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;/section&amp;gt;&lt;/span&gt;
</code></pre>
<h3 id="figure">figure</h3>
<p><code>figure</code> is simply an extension of the image capabilities present with Markdown.
<code>figure</code> provides the ability to add captions, CSS classes, alt text, links etc.</p>
<h4 id="usage-1">Usage</h4>
<p><code>figure</code> can use the following named parameters:</p>
<ul>
<li>src</li>
<li>link</li>
<li>title</li>
<li>caption</li>
<li>class</li>
<li>attr (attribution)</li>
<li>attrlink</li>
<li>alt</li>
</ul>
<h4 id="example-1">Example</h4>
<pre><code>{{&lt; figure src=&quot;/media/spf13.jpg&quot; title=&quot;Steve Francia&quot; &gt;}}
</code></pre>
<h4 id="example-output-1">Example output</h4>
<pre><code>&lt;figure&gt;
    &lt;img src=&quot;/media/spf13.jpg&quot;  /&gt;
    &lt;figcaption&gt;
        &lt;h4&gt;Steve Francia&lt;/h4&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
<h3 id="ref-relref">ref, relref</h3>
<p>These shortcodes will look up the pages by their relative path (e.g.,
<code>blog/post.md</code>) or their logical name (<code>post.md</code>) and return the permalink
(<code>ref</code>) or relative permalink (<code>relref</code>) for the found page.</p>
<p><code>ref</code> and <code>relref</code> also make it possible to make fragmentary links that work
for the header links generated by Hugo.</p>
<p>Read more on <a href="">cross-references</a>.</p>
<h4 id="usage-2">Usage</h4>
<p><code>ref</code> and <code>relref</code> take exactly one required parameter of <em>reference</em>.</p>
<h4 id="example-2">Example</h4>
<pre><code>[Neat]({{&lt; ref &quot;blog/neat.md&quot; &gt;}})
[Who]({{&lt; relref &quot;about.md#who&quot; &gt;}})
</code></pre>
<h4 id="example-output-2">Example Output</h4>
<p>Assuming that standard Hugo pretty URLs are turned on.</p>
<pre><code>&lt;a href=&quot;/blog/neat&quot;&gt;Neat&lt;/a&gt;
&lt;a href=&quot;/about/#who:c28654c202e73453784cfd2c5ab356c0&quot;&gt;Who&lt;/a&gt;
</code></pre>
<h3 id="twitter">Twitter</h3>
<p>You want to include a single tweet into your blog post? Everything you need is the URL of the tweet, e.g.:</p>
<ul>
<li><a href="https://twitter.com/spf13/status/666616452582129664">https://twitter.com/spf13/status/666616452582129664</a></li>
</ul>
<p>Pass the tweet&rsquo;s ID from the URL as parameter to the shortcode as shown below:</p>
<pre><code>{{&lt; tweet 666616452582129664 &gt;}}
</code></pre>
<h3 id="youtube">YouTube</h3>
<p>This shortcode embeds a responsive video player for <a href="https://www.youtube.com/">YouTube</a> videos. Only the ID of the video is required, e.g.:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=w7Ft2ymGmfc">https://www.youtube.com/watch?v=w7Ft2ymGmfc</a></li>
</ul>
<p>Copy the ID from behind <code>v=</code> and pass it to the shortcode:</p>
<pre><code>{{&lt; youtube w7Ft2ymGmfc &gt;}}
</code></pre>
<h3 id="vimeo">Vimeo</h3>
<p>Adding a video from <a href="https://vimeo.com/">Vimeo</a> is equivalent to the YouTube shortcode above. Extract the ID from the URL, e.g.:</p>
<ul>
<li><a href="https://vimeo.com/channels/staffpicks/146022717">https://vimeo.com/channels/staffpicks/146022717</a></li>
</ul>
<p>and pass it to the shortcode:</p>
<pre><code>{{&lt; vimeo 146022717 &gt;}}
</code></pre>
<h3 id="github-gists">GitHub gists</h3>
<p>Including code snippets with GitHub gists while writing a tutorial is common situation bloggers face. With a given URL of the gist, e.g.:</p>
<ul>
<li><a href="https://gist.github.com/spf13/7896402">https://gist.github.com/spf13/7896402</a></li>
</ul>
<p>pass the owner and the ID of the gist to the shortcode:</p>
<pre><code>{{&lt; gist spf13 7896402 &gt;}}
</code></pre>
<h3 id="speaker-deck">Speaker Deck</h3>
<p>To embed slides from <a href="https://speakerdeck.com/">Speaker Deck</a>, click on &ldquo;&lt; /&gt; Embed&rdquo; (under Share right next to the template on Speaker Deck) and copy the URL, e.g.:</p>
<pre><code>&lt;script async class=&quot;speakerdeck-embed&quot; data-id=&quot;4e8126e72d853c0060001f97&quot; data-ratio=&quot;1.33333333333333&quot; src=&quot;//speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>Extract the value from the field <code>data-id</code> and pass it to the shortcode:</p>
<pre><code>{{&lt; speakerdeck 4e8126e72d853c0060001f97 &gt;}}
</code></pre>
<h2 id="creating-your-own-shortcodes">Creating your own shortcodes</h2>
<p>To create a shortcode, place a template in the layouts/shortcodes directory. The
template name will be the name of the shortcode.</p>
<p>In creating a shortcode, you can choose if the shortcode will use <em>positional
parameters</em>, or <em>named parameters</em>, or <em>both</em>. A good rule of thumb is that if a
shortcode has a single required value in the case of the <code>youtube</code> example below,
then positional works very well. For more complex layouts with optional
parameters, named parameters work best.  Allowing both types of parameters is
useful for complex layouts where you want to set default values that can be
overridden.</p>
<p><strong>Inside the template</strong></p>
<p>To access a parameter by position, the <code>.Get</code> method can be used:</p>
<pre><code>{{ .Get 0 }}
</code></pre>
<p>To access a parameter by name, the <code>.Get</code> method should be utilized:</p>
<pre><code>{{ .Get &quot;class&quot; }}
</code></pre>
<p><code>with</code> is great when the output depends on a parameter being set:</p>
<pre><code>{{ with .Get &quot;class&quot;}} class=&quot;{{.}}&quot;{{ end }}
</code></pre>
<p><code>.Get</code> can also be used to check if a parameter has been provided. This is
most helpful when the condition depends on either one value or another&hellip;
or both:</p>
<pre><code>{{ or .Get &quot;title&quot; | .Get &quot;alt&quot; | if }} alt=&quot;{{ with .Get &quot;alt&quot;}}{{.}}{{else}}{{.Get &quot;title&quot;}}{{end}}&quot;{{ end }}
</code></pre>
<p>If a closing shortcode is used, the variable <code>.Inner</code> will be populated with all
of the content between the opening and closing shortcodes. If a closing
shortcode is required, you can check the length of <code>.Inner</code> and provide a warning
to the user.</p>
<p>A shortcode with <code>.Inner</code> content can be used without the inline content, and without the closing shortcode, by using the self-closing syntax:</p>
<pre><code>{{&lt; innershortcode /&gt;}}
</code></pre>
<p>The variable <code>.Params</code> contains the list of parameters in case you need to do
more complicated things than <code>.Get</code>.  It is sometimes useful to provide a
flexible shortcode that can take named or positional parameters.  To meet this
need, Hugo shortcodes have a <code>.IsNamedParams</code> boolean available that can be used
such as <code>{{ if .IsNamedParams }}...{{ else }}...{{ end }}</code>.  See the
<code>Single Flexible Example</code> below for an example.</p>
<p>You can also use the variable <code>.Page</code> to access all the normal <a href="https://www.feiyangkeji.com/doc/templates/variables/">Page Variables</a>.</p>
<h2 id="single-positional-example-youtube">Single Positional Example: youtube</h2>
<pre><code>{{&lt; youtube 09jf3ow9jfw &gt;}}
</code></pre>
<p>Would load the template /layouts/shortcodes/youtube.html</p>
<pre><code>&lt;div class=&quot;embed video-player&quot;&gt;
&lt;iframe class=&quot;youtube-player&quot; type=&quot;text/html&quot; width=&quot;640&quot; height=&quot;385&quot; src=&quot;http://www.youtube.com/embed/{{ index .Params 0 }}&quot; allowfullscreen frameborder=&quot;0&quot;&gt;
&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
<p>This would be rendered as:</p>
<pre><code>&lt;div class=&quot;embed video-player&quot;&gt;
&lt;iframe class=&quot;youtube-player&quot; type=&quot;text/html&quot;
    width=&quot;640&quot; height=&quot;385&quot;
    src=&quot;http://www.youtube.com/embed/09jf3ow9jfw&quot;
    allowfullscreen frameborder=&quot;0&quot;&gt;
&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
<h2 id="single-named-example-image-with-caption">Single Named Example: image with caption</h2>
<pre><code>{{&lt; img src=&quot;/media/spf13.jpg&quot; title=&quot;Steve Francia&quot; &gt;}}
</code></pre>
<p>Would load the template /layouts/shortcodes/img.html</p>
<pre><code>&lt;!-- image --&gt;
&lt;figure {{ with .Get &quot;class&quot; }}class=&quot;{{.}}&quot;{{ end }}&gt;
    {{ with .Get &quot;link&quot;}}&lt;a href=&quot;{{.}}&quot;&gt;{{ end }}
        &lt;img src=&quot;{{ .Get &quot;src&quot; }}&quot; {{ if or (.Get &quot;alt&quot;) (.Get &quot;caption&quot;) }}alt=&quot;{{ with .Get &quot;alt&quot;}}{{.}}{{else}}{{ .Get &quot;caption&quot; }}{{ end }}&quot;{{ end }} /&gt;
    {{ if .Get &quot;link&quot;}}&lt;/a&gt;{{ end }}
    {{ if or (or (.Get &quot;title&quot;) (.Get &quot;caption&quot;)) (.Get &quot;attr&quot;)}}
    &lt;figcaption&gt;{{ if isset .Params &quot;title&quot; }}
        &lt;h4&gt;{{ .Get &quot;title&quot; }}&lt;/h4&gt;{{ end }}
        {{ if or (.Get &quot;caption&quot;) (.Get &quot;attr&quot;)}}&lt;p&gt;
        {{ .Get &quot;caption&quot; }}
        {{ with .Get &quot;attrlink&quot;}}&lt;a href=&quot;{{.}}&quot;&gt; {{ end }}
            {{ .Get &quot;attr&quot; }}
        {{ if .Get &quot;attrlink&quot;}}&lt;/a&gt; {{ end }}
        &lt;/p&gt; {{ end }}
    &lt;/figcaption&gt;
    {{ end }}
&lt;/figure&gt;
&lt;!-- image --&gt;
</code></pre>
<p>Would be rendered as:</p>
<pre><code>&lt;figure &gt;
    &lt;img src=&quot;/media/spf13.jpg&quot;  /&gt;
    &lt;figcaption&gt;
        &lt;h4&gt;Steve Francia&lt;/h4&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
<h2 id="single-flexible-example-vimeo-with-defaults">Single Flexible Example: vimeo with defaults</h2>
<pre><code>{{&lt; vimeo 49718712 &gt;}}
{{&lt; vimeo id=&quot;49718712&quot; class=&quot;flex-video&quot; &gt;}}
</code></pre>
<p>Would load the template /layouts/shortcodes/vimeo.html</p>
<pre><code>{{ if .IsNamedParams }}
  &lt;div class=&quot;{{ if .Get &quot;class&quot; }}{{ .Get &quot;class&quot; }}{{ else }}vimeo-container{{ end }}&quot;&gt;
    &lt;iframe src=&quot;//player.vimeo.com/video/{{ .Get &quot;id&quot; }}&quot; allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
{{ else }}
  &lt;div class=&quot;{{ if len .Params | eq 2 }}{{ .Get 1 }}{{ else }}vimeo-container{{ end }}&quot;&gt;
    &lt;iframe src=&quot;//player.vimeo.com/video/{{ .Get 0 }}&quot; allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
{{ end }}
</code></pre>
<p>Would be rendered as:</p>
<pre><code>&lt;div class=&quot;vimeo-container&quot;&gt;
  &lt;iframe src=&quot;//player.vimeo.com/video/49718712&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;div class=&quot;flex-video&quot;&gt;
  &lt;iframe src=&quot;//player.vimeo.com/video/49718712&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
<h2 id="paired-example-highlight">Paired Example: Highlight</h2>
<p><em>Hugo already ships with the <code>highlight</code> shortcode</em></p>
<pre><code>{{&lt; highlight html &gt;}}
&lt;html&gt;
    &lt;body&gt; This HTML &lt;/body&gt;
&lt;/html&gt;
{{&lt; /highlight &gt;}}
</code></pre>
<p>The template for this utilizes the following code (already included in Hugo)</p>
<pre><code>{{ .Get 0 | highlight .Inner  }}
</code></pre>
<p>And will be rendered as:</p>
<pre><code>&lt;div class=&quot;highlight&quot; style=&quot;background: #272822&quot;&gt;&lt;pre style=&quot;line-height: 125%&quot;&gt;&lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
    &lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt; This HTML &lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span style=&quot;color: #f92672&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;
</code></pre>
<p>Please notice that this template makes use of a Hugo-specific template function
called <code>highlight</code> which uses Pygments to add the highlighting code.</p>
<h2 id="simple-single-word-example-year">Simple Single-word Example: Year</h2>
<p>Let&rsquo;s assume you would like to have a shortcode to be replaced by the current year in your Markdown content files, for a license or copyright statement. Calling a shortcode like this:</p>
<pre><code>{{&lt; year &gt;}}
</code></pre>
<p>&hellip; would load your one-line template <code>/layouts/shortcodes/year.html</code>, which contains:</p>
<pre><code>{{ .Page.Now.Year }}
</code></pre>
<p>More shortcode examples can be found at <a href="https://github.com/spf13/spf13.com/tree/master/layouts/shortcodes">spf13.com</a>.</p>

                </section>
            </article>
        </main>
        <br />
        
        <div class="row">
            <div class="col-xs-6 col-sm-6 text-center">
                
                <a href="https://www.feiyangkeji.com/doc/extras/permalinks">&lt; 上一篇</a>
                
            </div>
            <div class="col-xs-6 col-sm-6 text-center">
                
                <a href="https://www.feiyangkeji.com/doc/extras/pagination">下一篇 &gt;</a>
                
            </div>
        </div>
        
    </div> 
</div>



<hr />

<div class="row">
    <div class="col-sm-12">
        
	    <div class="text-center">
        
		    <p class="doc-footer-em"><a href="#">回到顶部↑</a></p>
	    </div>
	</div>
</div>

</div> 

<footer class="doc-footer">
	
    <p>Copyright © <a href="http://www.feiyangkeji.com/"> 北京飞阳信远科技有限公司(京ICP备2021020257号-1 )</a> 2021. Generated by <a href="http://gohugo.io/">Hugo</a></p>
</footer>

<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	ga('create', 'UA-10147768-3', 'auto');
	ga('send', 'pageview');
</script>

<script src="https://www.feiyangkeji.com/js/jquery-1.11.2.min.js"></script>
<script src="https://www.feiyangkeji.com/js/bootstrap.min.js"></script>

<script src="https://www.feiyangkeji.com/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://www.feiyangkeji.com/js/ie10-viewport-bug-workaround.js"></script>

</body>
</html>

